<template>
  <view class="container">
    <view class="header">
      <view :style="{ height: statusBarHeight + 'px' }"></view>
      <view class="header-title">{{initShop.name}}</view>
      <view class="header-tool">
        <view class="search u-flex u-row-center u-col-center u-m-b-10 u-p-x-20" @tap="$Router.push('/pages/public/search')">
          <view class="search-content u-flex u-col-center">
            <text class="u-iconfont uicon-search search-icon"></text>
            <view class="pl-text">搜索</view>
          </view>
        </view>
      </view>
    </view>

    <view class="swiper-box">
       <swiper v-if="initShop">
        <swiper-item v-for="val in initShop.banner">
          <image mode="widthFix" :src="$IMG_URL+val.image"></image>
        </swiper-item>
      </swiper>
      <view class="menu">
        <view class="item" @tap="$Router.push('/pages/activity/sign/index')">
          <image :src="$IMG_URL+'/imgs/other/index/ic1.png'"></image>
          <text>签到</text>
        </view>
        <view class="item" @tap="$Router.push('/pages/user/wallet/top-up')">
          <image :src="$IMG_URL+'/imgs/other/index/ic2.png'"></image>
          <text>充值</text>
        </view>
        <view class="item" @tap="$Router.push('/pages/goods/new?id=165')">
          <image :src="$IMG_URL+'/imgs/other/index/ic3.png'"></image>
          <text>新品上市</text>
        </view>
        <view class="item" @tap="$Router.push('/pages/app/coupon/list')">
          <image :src="$IMG_URL+'/imgs/other/index/ic4.png'"></image>
          <text>领券中心</text>
        </view>
        <view class="item" @tap="$Router.push('/pages/public/fastbuy')">
          <image :src="$IMG_URL+'/imgs/other/index/ic5.png'"></image>
          <text>快速订购</text>
        </view>
      </view>
    </view>

    <view class="news-goods">
      <view class="news-goods-title">
        <view class="ngt-t">新品推荐</view>
        <view class="ngt-more" @tap="$Router.push('/pages/goods/new?id=165')">更多>></view>
      </view>
      <view class="news-lists">
        <view class="news-item" v-for="f in news_goods" :key="f.id" @tap="$Router.push({ path: '/pages/goods/detail', query: { id: f.id } })">
          <view class="image">
            <image class="goods_img" lazy-load fade-show :src="f.image" mode="widthFix"></image>
          </view>
          <view class="title">{{ f.title }}</view>
          <view class="u-flex u-col-center u-m-t-20 u-row-between">
            <view class="u-flex u-col-bottom">
              <view class="price u-m-r-10">{{ f.price }}</view>
              <view class="qi">起</view>
              <view class="origin-price">{{ parseInt(f.original_price) }}</view>
            </view>
            <view>
              <image class="cart" src="https://yz-mrzq.oss-cn-shenzhen.aliyuncs.com/imgs/other/index/cart.png"></image>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="cate-all">
      <view class="cate-title">
        <view class="c-t">商品分类</view>
        <view class="c-more" @tap="$Router.pushTab('/pages/index/category')">更多>></view>
      </view>
      <view class="cate-lists">
        <view class="cate-item" v-for="v in cate_all" @tap="$Router.push('/pages/goods/list?id='+v.id)">
          <view class="image">
            <image :src="v.image"></image>
          </view>
          <view>{{v.name}}</view>
        </view>
      </view>
    </view>

    <view class="movie-box" v-if="initMovie && initMovie.movie_show">
      <video :src="$IMG_URL+initMovie.movie"></video>
      <view class="movie-con">
        <view class="u-flex u-col-bottom">
          <view class="movie-tit">{{ initMovie.movie_name }}</view>
          <view class="movie-time">{{ initMovie.movie_time }}</view>
        </view>
        <view class="movie-desc">{{ initMovie.movie_desc }}</view>
      </view>
    </view>

    <view class="recmd-goods" v-if="recmd_goods.length>0">
      <view class="recmd-goods-title">
        <view class="rgt-t">好<text></text>物<text></text>推<text></text>荐</view>
        <view class="rgt-more" @tap="$Router.push('/pages/goods/recmd?id=164')">更多>></view>
      </view>
      <view class="recmd-lists">
        <view class="recmd-item" v-for="f in recmd_goods" :key="f.id" @tap="$Router.push({ path: '/pages/goods/detail', query: { id: f.id } })">
          <view class="image">
            <image class="goods_img" lazy-load fade-show :src="f.image" mode="widthFix"></image>
          </view>
          <view class="title">{{ f.title }}</view>
          <view class="u-flex u-col-center u-m-t-20 u-row-between">
            <view class="u-flex u-col-bottom">
              <view class="price u-m-r-10">{{ f.price }}</view>
              <view class="qi">起</view>
              <view class="origin-price">{{ parseInt(f.original_price) }}</view>
            </view>
            <view>
              <image class="cart" src="https://yz-mrzq.oss-cn-shenzhen.aliyuncs.com/imgs/other/index/cart-orange.png"></image>
            </view>
          </view>
        </view>
      </view>
    </view>


    <!-- 登录提示 -->
    <shopro-auth-modal></shopro-auth-modal>

    <view class="icons" style="flex-wrap: wrap;"><view class="uicon-en u-iconfont"></view><view class="uicon-zh u-iconfont"></view><view class="uicon-level u-iconfont"></view><view class="uicon-woman u-iconfont"></view><view class="uicon-man u-iconfont"></view><view class="uicon-column-line u-iconfont"></view><view class="uicon-empty-page u-iconfont"></view><view class="uicon-empty-data u-iconfont"></view><view class="uicon-empty-car u-iconfont"></view><view class="uicon-empty-order u-iconfont"></view><view class="uicon-empty-address u-iconfont"></view><view class="uicon-empty-message u-iconfont"></view><view class="uicon-empty-search u-iconfont"></view><view class="uicon-empty-favor u-iconfont"></view><view class="uicon-empty-coupon u-iconfont"></view><view class="uicon-empty-history u-iconfont"></view><view class="uicon-empty-permission u-iconfont"></view><view class="uicon-empty-news u-iconfont"></view><view class="uicon-empty-wifi u-iconfont"></view><view class="uicon-empty-list u-iconfont"></view><view class="uicon-arrow-left-double u-iconfont"></view><view class="uicon-arrow-right-double u-iconfont"></view><view class="uicon-red-packet u-iconfont"></view><view class="uicon-red-packet-fill u-iconfont"></view><view class="uicon-order u-iconfont"></view><view class="uicon-nav-back-arrow u-iconfont"></view><view class="uicon-nav-back u-iconfont"></view><view class="uicon-checkbox-mark u-iconfont"></view><view class="uicon-arrow-up-fill u-iconfont"></view><view class="uicon-arrow-down-fill u-iconfont"></view><view class="uicon-backspace u-iconfont"></view><view class="uicon-android-circle-fill u-iconfont"></view><view class="uicon-android-fill u-iconfont"></view><view class="uicon-question u-iconfont"></view><view class="uicon-pause u-iconfont"></view><view class="uicon-close u-iconfont"></view><view class="uicon-volume-up u-iconfont"></view><view class="uicon-volume-off u-iconfont"></view><view class="uicon-info u-iconfont"></view><view class="uicon-error u-iconfont"></view><view class="uicon-lock-opened-fill u-iconfont"></view><view class="uicon-lock-fill u-iconfont"></view><view class="uicon-lock u-iconfont"></view><view class="uicon-photo-fill u-iconfont"></view><view class="uicon-photo u-iconfont"></view><view class="uicon-account-fill u-iconfont"></view><view class="uicon-minus-people-fill u-iconfont"></view><view class="uicon-plus-people-fill u-iconfont"></view><view class="uicon-account u-iconfont"></view><view class="uicon-thumb-down-fill u-iconfont"></view><view class="uicon-thumb-down u-iconfont"></view><view class="uicon-thumb-up-fill u-iconfont"></view><view class="uicon-thumb-up u-iconfont"></view><view class="uicon-person-delete-fill u-iconfont"></view><view class="uicon-cut u-iconfont"></view><view class="uicon-fingerprint u-iconfont"></view><view class="uicon-home-fill u-iconfont"></view><view class="uicon-home u-iconfont"></view><view class="uicon-hourglass-half-fill u-iconfont"></view><view class="uicon-hourglass u-iconfont"></view><view class="uicon-lock-open u-iconfont"></view><view class="uicon-integral-fill u-iconfont"></view><view class="uicon-integral u-iconfont"></view><view class="uicon-coupon u-iconfont"></view><view class="uicon-coupon-fill u-iconfont"></view><view class="uicon-kefu-ermai u-iconfont"></view><view class="uicon-scan u-iconfont"></view><view class="uicon-rmb u-iconfont"></view><view class="uicon-rmb-circle-fill u-iconfont"></view><view class="uicon-rmb-circle u-iconfont"></view><view class="uicon-gift u-iconfont"></view><view class="uicon-gift-fill u-iconfont"></view><view class="uicon-bookmark-fill u-iconfont"></view><view class="uicon-zhuanfa u-iconfont"></view><view class="uicon-eye-off-outline u-iconfont"></view><view class="uicon-eye-off u-iconfont"></view><view class="uicon-pause-circle u-iconfont"></view><view class="uicon-play-circle u-iconfont"></view><view class="uicon-pause-circle-fill u-iconfont"></view><view class="uicon-play-circle-fill u-iconfont"></view><view class="uicon-grid u-iconfont"></view><view class="uicon-play-right u-iconfont"></view><view class="uicon-play-left u-iconfont"></view><view class="uicon-calendar u-iconfont"></view><view class="uicon-rewind-right u-iconfont"></view><view class="uicon-rewind-left u-iconfont"></view><view class="uicon-skip-forward-right u-iconfont"></view><view class="uicon-skip-back-left u-iconfont"></view><view class="uicon-play-left-fill u-iconfont"></view><view class="uicon-play-right-fill u-iconfont"></view><view class="uicon-grid-fill u-iconfont"></view><view class="uicon-rewind-left-fill u-iconfont"></view><view class="uicon-rewind-right-fill u-iconfont"></view><view class="uicon-pushpin u-iconfont"></view><view class="uicon-star u-iconfont"></view><view class="uicon-star-fill u-iconfont"></view><view class="uicon-server-fill u-iconfont"></view><view class="uicon-server-man u-iconfont"></view><view class="uicon-edit-pen u-iconfont"></view><view class="uicon-edit-pen-fill u-iconfont"></view><view class="uicon-wifi u-iconfont"></view><view class="uicon-wifi-off u-iconfont"></view><view class="uicon-file-text u-iconfont"></view><view class="uicon-file-text-fill u-iconfont"></view><view class="uicon-more-dot-fill u-iconfont"></view><view class="uicon-minus u-iconfont"></view><view class="uicon-minus-circle u-iconfont"></view><view class="uicon-plus u-iconfont"></view><view class="uicon-plus-circle u-iconfont"></view><view class="uicon-minus-circle-fill u-iconfont"></view><view class="uicon-plus-circle-fill u-iconfont"></view><view class="uicon-email u-iconfont"></view><view class="uicon-email-fill u-iconfont"></view><view class="uicon-phone u-iconfont"></view><view class="uicon-phone-fill u-iconfont"></view><view class="uicon-clock u-iconfont"></view><view class="uicon-car u-iconfont"></view><view class="uicon-car-fill u-iconfont"></view><view class="uicon-warning u-iconfont"></view><view class="uicon-warning-fill u-iconfont"></view><view class="uicon-search u-iconfont"></view><view class="uicon-baidu-circle-fill u-iconfont"></view><view class="uicon-baidu u-iconfont"></view><view class="uicon-facebook u-iconfont"></view><view class="uicon-facebook-circle-fill u-iconfont"></view><view class="uicon-qzone u-iconfont"></view><view class="uicon-qzone-circle-fill u-iconfont"></view><view class="uicon-moments-circel-fill u-iconfont"></view><view class="uicon-moments u-iconfont"></view><view class="uicon-qq-circle-fill u-iconfont"></view><view class="uicon-qq-fill u-iconfont"></view><view class="uicon-weibo u-iconfont"></view><view class="uicon-weibo-circle-fill u-iconfont"></view><view class="uicon-taobao u-iconfont"></view><view class="uicon-taobao-circle-fill u-iconfont"></view><view class="uicon-twitter u-iconfont"></view><view class="uicon-twitter-circle-fill u-iconfont"></view><view class="uicon-weixin-circle-fill u-iconfont"></view><view class="uicon-weixin-fill u-iconfont"></view><view class="uicon-zhifubao-circle-fill u-iconfont"></view><view class="uicon-zhifubao u-iconfont"></view><view class="uicon-zhihu u-iconfont"></view><view class="uicon-zhihu-circle-fill u-iconfont"></view><view class="uicon-list u-iconfont"></view><view class="uicon-list-dot u-iconfont"></view><view class="uicon-setting u-iconfont"></view><view class="uicon-bell u-iconfont"></view><view class="uicon-bell-fill u-iconfont"></view><view class="uicon-attach u-iconfont"></view><view class="uicon-shopping-cart u-iconfont"></view><view class="uicon-shopping-cart-fill u-iconfont"></view><view class="uicon-tags u-iconfont"></view><view class="uicon-share u-iconfont"></view><view class="uicon-question-circle-fill u-iconfont"></view><view class="uicon-question-circle u-iconfont"></view><view class="uicon-error-circle u-iconfont"></view><view class="uicon-checkmark-circle u-iconfont"></view><view class="uicon-close-circle u-iconfont"></view><view class="uicon-info-circle u-iconfont"></view><view class="uicon-md-person-add u-iconfont"></view><view class="uicon-md-person-fill u-iconfont"></view><view class="uicon-bag-fill u-iconfont"></view><view class="uicon-bag u-iconfont"></view><view class="uicon-chat-fill u-iconfont"></view><view class="uicon-chat u-iconfont"></view><view class="uicon-more-circle u-iconfont"></view><view class="uicon-more-circle-fill u-iconfont"></view><view class="uicon-volume u-iconfont"></view><view class="uicon-volume-fill u-iconfont"></view><view class="uicon-reload u-iconfont"></view><view class="uicon-camera u-iconfont"></view><view class="uicon-heart u-iconfont"></view><view class="uicon-heart-fill u-iconfont"></view><view class="uicon-minus-square-fill u-iconfont"></view><view class="uicon-plus-square-fill u-iconfont"></view><view class="uicon-pushpin-fill u-iconfont"></view><view class="uicon-camera-fill u-iconfont"></view><view class="uicon-setting-fill u-iconfont"></view><view class="uicon-google u-iconfont"></view><view class="uicon-ie u-iconfont"></view><view class="uicon-apple-fill u-iconfont"></view><view class="uicon-chrome-circle-fill u-iconfont"></view><view class="uicon-github-circle-fill u-iconfont"></view><view class="uicon-IE-circle-fill u-iconfont"></view><view class="uicon-google-circle-fill u-iconfont"></view><view class="uicon-arrow-down u-iconfont"></view><view class="uicon-arrow-left u-iconfont"></view><view class="uicon-map u-iconfont"></view><view class="uicon-man-add-fill u-iconfont"></view><view class="uicon-tags-fill u-iconfont"></view><view class="uicon-arrow-leftward u-iconfont"></view><view class="uicon-arrow-rightward u-iconfont"></view><view class="uicon-arrow-downward u-iconfont"></view><view class="uicon-arrow-right u-iconfont"></view><view class="uicon-arrow-up u-iconfont"></view><view class="uicon-arrow-upward u-iconfont"></view><view class="uicon-bookmark u-iconfont"></view><view class="uicon-eye u-iconfont"></view><view class="uicon-man-delete u-iconfont"></view><view class="uicon-man-add u-iconfont"></view><view class="uicon-trash u-iconfont"></view><view class="uicon-error-circle-fill u-iconfont"></view><view class="uicon-calendar-fill u-iconfont"></view><view class="uicon-checkmark-circle-fill u-iconfont"></view><view class="uicon-close-circle-fill u-iconfont"></view><view class="uicon-clock-fill u-iconfont"></view><view class="uicon-checkmark u-iconfont"></view><view class="uicon-download u-iconfont"></view><view class="uicon-eye-fill u-iconfont"></view><view class="uicon-mic-off u-iconfont"></view><view class="uicon-mic u-iconfont"></view><view class="uicon-info-circle-fill u-iconfont"></view><view class="uicon-map-fill u-iconfont"></view><view class="uicon-trash-fill u-iconfont"></view><view class="uicon-volume-off-fill u-iconfont"></view><view class="uicon-volume-up-fill u-iconfont"></view><view class="uicon-share-fill u-iconfont"></view></view>

  </view>
</template>

<script>
import shSearch from "@/pages/index/components/sh-search.vue";
import { mapGetters } from 'vuex';
import Auth from '@/shopro/permission/index.js';
let systemInfo = uni.getSystemInfoSync();
export default {
  components: {shSearch},
  data() {
    return {
      statusBarHeight: systemInfo.statusBarHeight,
      latitude : '',
      longitude : '',
      news_goods : [],
      recmd_goods : [],
      cate_all: [],
      lat : 0,
      lng : 0,
      addr : '定位',
    };
  },
  computed: {
    ...mapGetters(['initShop', 'initMovie', 'homeTemplate', 'hasTemplate', 'isLogin']),
  },
  onLoad() {
    this.getNewsList();
    this.getCategory();
    this.getRecmdList();

  },
  onShow(){
    if(uni.getStorageSync('addr')){
      this.addr = uni.getStorageSync('addr');
    }
    if(uni.getStorageSync('lat')){
      this.lat = uni.getStorageSync('lat');
    }
    if(uni.getStorageSync('lng')) {
      this.lng = uni.getStorageSync('lng');
    }
  },
  methods:{
    // 获取分类
    async getCategory() {
      const tabbarData = await this.$http('category.detail', {
        id: 43
      });
      this.cate_all = tabbarData.data.children;
    },

    // 新品推荐
    async getNewsList() {
      let that = this;
      that.$http('goods.lists_all', {
        category_id : 165
      }).then(res => {
        if (res.code === 1) {
          that.news_goods = res.data;
        }
      });
    },

    // 好物推荐
    async getRecmdList() {
      let that = this;
      that.$http('goods.lists_all', {
        category_id : 164
      }).then(res => {
        if (res.code === 1) {
          that.recmd_goods = res.data;
        }
      });
    }
  }
}
</script>

<style lang="scss">
.container{
  padding-bottom: 60rpx;
}
.header{
  color: #fff;
  background-image: url('https://yz-mrzq.oss-cn-shenzhen.aliyuncs.com/imgs/other/index/index-top-bg.png');
  background-size: cover;
  height: 240rpx;
  .header-title{
    text-align: center;
    margin-top: 20rpx;
  }
  .header-tool{
    display: flex;
    align-items: center;
    justify-content: center;
    .header-addr{
      margin: 0 20rpx;
      text-overflow: ellipsis;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      image{
        width: 26rpx;
        height: 30rpx;
        margin-right: 10rpx;
        position: relative;
        top: 3rpx;
      }
    }
  }
}
.search {
  height: 100rpx;
  width: 400rpx;
  .search-content {
    width: 400rpx;
    padding: 0 18rpx;
    background-color: #f2f2f2;
    border-radius: 100rpx;
    height: 44rpx;
    .search-icon {
      color: #606266;
    }
    .pl-text {
      color: $u-tips-color;
      margin-left: 10rpx;
    }
  }
}

.swiper-box{
  swiper{
    height: 400rpx;
    width: 100%;
    position: relative;
    z-index: 1;
    swiper-item{
      width: 100%;
      image{
        width: 100%;
      }
    }
  }
}

.menu{
  display: flex;
  justify-content: space-between;
  background: #fff;
  position: relative;
  z-index: 2;
  border-radius: 10rpx;
  margin: -40rpx 20rpx 0 20rpx;
  padding: 10rpx 20rpx;
  .item{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    image{
      width: 100rpx;
      height: 100rpx;
    }
    text{
      color: #333;
      font-size: 24rpx;
      text-align: center;
    }
  }
}

.news-goods{
  width: 700rpx;
  margin: 20rpx auto 0 auto;
  border-radius: 10rpx;
  border: 4rpx solid #ffcf9e;
  color: #555;
  overflow: hidden;
  background-color: #fff;
  background-image: url('https://yz-mrzq.oss-cn-shenzhen.aliyuncs.com/imgs/other/index/index-news-bg.png');
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .news-goods-title{
    width: 90%;
    margin-top: 20rpx;
    margin-bottom: 20rpx;
    display: flex;
    padding: 0 20rpx;
    align-items: center;
    justify-content: space-between;
    .ngt-t{
      margin-left: 40rpx;
      font-weight: bold;
      position: relative;
      &:after{
        content: '';
        display: block;
        width: 100rpx;
        height: 20rpx;
        background: linear-gradient(to right,#ffcf9e,#fffae8);
        border-radius: 10rpx;
        margin-top: -16rpx;
        margin-left: 30rpx;
      }
    }
    .ngt-more{
      font-size: 22rpx;
    }
  }
  .news-lists{
    display: flex;
    margin-bottom: 30rpx;
    .news-item{
      width: 200rpx;
      margin-left: 10px;
      background: #fff;
      box-shadow: 3rpx 3rpx 3rpx #555;
      border-radius: 10rpx;
      overflow: hidden;
      padding: 0 7rpx;
      box-sizing: border-box;
      &:nth-of-type(1){
        margin-left: 0;
      }
      .image{
        width: 200rpx;
        height: 200rpx;
      }
      .title{
        margin-top: 20rpx;
        font-size: 18rpx;
        height: 26rpx;
        overflow: hidden;
      }
      .price{
        color: $u-type-error;
        font-weight: bold;
        font-size: 32rpx;
        &::before {
          content: '￥';
          font-size: 22rpx;
        }
      }
      .qi{
        color: $u-type-info-disabled;
        font-size: 22rpx;
        margin-right: 5rpx;
        display: none;
      }
      .origin-price{
        display: none;
        color: $u-type-info-disabled;
        font-size: 22rpx;
        text-decoration: line-through;
        &::before {
          content: '￥';
          font-size: 22rpx;
        }
      }
      .cart{
        width: 30rpx;
        height: 30rpx;
      }
    }
  }
}

.cate-all{
  width: 700rpx;
  margin: 20rpx auto 0 auto;
  border-radius: 10rpx;
  border: 4rpx solid #ffcf9e;
  background: linear-gradient(to bottom,#ffcf9f,#fff,#fff,#fff);
  color: #555;
  overflow: hidden;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  .cate-title{
    width: 90%;
    margin-top: 20rpx;
    margin-bottom: 20rpx;
    display: flex;
    padding: 0 20rpx;
    align-items: center;
    justify-content: space-between;
    .c-t{
      margin-left: 40rpx;
      font-weight: bold;
      position: relative;
      &:after{
        content: '';
        display: block;
        width: 100rpx;
        height: 20rpx;
        background: linear-gradient(to right,#ffcf9e,#fffae8);
        border-radius: 10rpx;
        margin-top: -16rpx;
        margin-left: 30rpx;
      }
    }
    .c-more{
      font-size: 22rpx;
    }
  }
  .cate-lists{
    overflow-x: scroll;
    width: 100%;
    white-space: nowrap;
    .cate-item{
      margin-left: 20rpx;
      display: inline-block;
      overflow: hidden;
      width: 115rpx;
      height: 115rpx;
      border-radius: 20rpx;
      image{
        width: 115rpx;
        height: 115rpx;
      }
    }
  }
}

.movie-box{
  background: #fff;
  width: 700rpx;
  margin: 20rpx auto 0 auto;
  border-radius: 10rpx;
  border: 8rpx solid #ffcf9e;
  video{
    width: 100%;
  }
  .movie-con{
    padding: 20rpx;
    .movie-tit{
      color: #e39762;
      font-weight: bold;
    }
    .movie-time{
      margin-left: 20rpx;
      font-size: 20rpx;
    }
    .movie-desc{
      margin-top: 20rpx;
      font-size: 22rpx;
    }
  }
}

.recmd-goods{
  width: 700rpx;
  margin: 20rpx auto 0 auto;
  border-radius: 10rpx;
  border: 4rpx solid #ffcf9e;
  background: linear-gradient(to bottom,#ffcf9f,#fff,#fff,#fff);
  color: #555;
  overflow: hidden;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  .recmd-goods-title{
    width: 90%;
    margin-top: 20rpx;
    margin-bottom: 20rpx;
    display: flex;
    padding: 0 20rpx;
    align-items: center;
    justify-content: space-between;
    .rgt-t{
      font-weight: bold;
      font-size: 40rpx;
      color: #000;
      display: flex;
      align-items: center;
      margin-left: 120rpx;
      text{
        background: #e39763;
        display: inline-block;
        height: 40rpx;
        width: 10rpx;
        border-radius: 5rpx;
        margin: 0 20rpx;
      }
    }
    .rgt-more{
      font-size: 22rpx;
    }
  }
  .recmd-lists{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 30rpx;
    padding: 30rpx;
    padding-bottom: 0;
    .recmd-item{
      width: 300rpx;
      background: #fff;
      box-shadow: 5rpx 5rpx 8rpx #ffd09f;
      border-radius: 10rpx;
      overflow: hidden;
      padding: 0 7rpx;
      box-sizing: border-box;
      margin-bottom: 20rpx;
      .image{
        width: 300rpx;
        height: 300rpx;
      }
      .title{
        margin-top: 20rpx;
        font-size: 18rpx;
        height: 26rpx;
        overflow: hidden;
      }
      .price{
        color: $u-type-error;
        font-size: 32rpx;
        font-weight: bold;
        &::before {
          content: '￥';
          font-size: 16rpx;
        }
      }
      .qi{
        color: $u-type-info-disabled;
        font-size: 22rpx;
        margin-right: 5rpx;
      }
      .origin-price{
        color: $u-type-info-disabled;
        font-size: 22rpx;
        text-decoration: line-through;
        &::before {
          content: '￥';
          font-size: 22rpx;
        }
      }
      .cart{
        width: 50rpx;
        height: 50rpx;
      }
    }
  }
}

.icons{
  display: flex;
  display: none;
  view{
    color: #fff;
    font-size: 80rpx;
  }
}
</style>
